<template>
  <div style="background: #202B61; width: 89%;height: auto;min-height: 92.5%;max-height: 300vh;text-align: left;position: absolute;      margin: -20px;  background-color: #202B61;">
    <!-- 顶部tab切换 -->
    <div style="margin-left: 1vh;margin-right: 1vh;top: 1%; width: 99%;background: rgb(46, 60, 133);height: 8vh;float: left;position: absolute;display: inline-flex;">

      <div id="div1" @click="buttonClick('1','div1')" style="background:#409EFF"  class="buttonStyle">光伏/热</div>
      <div id="div2" @click="buttonClick('2','div2')" class="buttonStyle">光伏</div>
      <div id="div3" @click="buttonClick('3','div3')" class="buttonStyle">风机</div>
      <div id="div4" @click="buttonClick('4','div4')" class="buttonStyle">锂电池</div>
      <div id="div5" @click="buttonClick('5','div5')" class="buttonStyle">铅酸电池</div>
      <div id="div6" @click="buttonClick('6','div6')" class="buttonStyle">ALK电解槽</div>
      <div id="div7" @click="buttonClick('7','div7')" class="buttonStyle">PEM电解槽</div>
      <div id="div8" @click="buttonClick('8','div8')" class="buttonStyle">AEM电解槽</div>
      <div id="div9" @click="buttonClick('9','div9')" class="buttonStyle">固态储氢</div>
      <div id="div10" @click="buttonClick('10','div10')" class="buttonStyle">气态储氢</div>
      <div id="div11" @click="buttonClick('11','div11')" class="buttonStyle">液态储氢</div>
      <div id="div12" @click="buttonClick('12','div12')" class="buttonStyle">燃料电池</div>
      <div id="div13" @click="buttonClick('13','div13')" class="buttonStyle">集热器</div>
      <div id="div14" @click="buttonClick('14','div14')" class="buttonStyle">地源热泵</div>
      <div id="div15" @click="buttonClick('15','div15')" class="buttonStyle">空气源热泵</div>
      <div id="div16" @click="buttonClick('16','div16')" class="buttonStyle">水源热泵</div>
      <div id="div17" @click="buttonClick('17','div17')" class="buttonStyle">固体蓄热</div>
      <div id="div18" @click="buttonClick('18','div18')" class="buttonStyle">水蓄热</div>
      <div id="div19" @click="buttonClick('19','div19')" class="buttonStyle">吸收式制冷</div>
      <div id="div20" @click="buttonClick('20','div20')" class="buttonStyle">水蓄冷</div>
      <div id="div21" @click="buttonClick('21','div21')" class="buttonStyle">冰蓄冷</div>


    </div>

    <div style="margin-left: 1vh;margin-right: 1vh; top: 10.7%; width: 99%;height: auto;float: left;position: absolute;">
      <!--路由页面-->
      <router-view :key="activeDate"></router-view>
    </div>


  </div>
</template>

<script>

  export default {
    name: 'resourceBase',
    data () {
      return {
        activeDate:'',
      }
    },
    mounted : function(){
      this.activeDate = new Date().getTime();
      this.$router.push({path:'/deviceLibrary',query:{"type":1}})
    },
    methods: {
      buttonClick : function(type,divId){
        //;

        for(var i = 1;i<=21;i++){
          $("#div"+i).css("background","#202B61");
        }

        $("#"+divId).css("background","#409EFF");


        this.activeDate = new Date().getTime();

        //路由跳转
        this.$router.push({path:'/deviceLibrary',query:{"type":type}})


      }
    }
  }
</script>

<style scoped>

  .buttonStyle {
    height: 5vh;
    width: 9vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 5px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.2vh;
    background: #202B61;
    margin: 1.5vh 5px;
    text-align: center;
    line-height: 5vh;
    vertical-align: middle;
    text-decoration: none;
  }


</style>
